{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/Design_System/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"60d63af8-db5e-50dc-aff3-69813487bba8","excerpt":"atomic design Atom(원자) 물질의 기본 빌딩 블록 웹 인터페이스에 적용 폼의 텍스트 레이블, 인풋 필드, 버튼과 같은 HTML 태그 컬러 팔레트, 폰트, 애니메이션과 같은 인터페이스 의미가 없음 스크린샷 2020-04-24 오전 9 30 40 Molecules(분자) 원자그룹 폼의 텍스트 레이블, 인풋필드, 버튼의 조합 폼(form)으로 구성되어 결합하면 실제로 무엇인가 할 수 있음 의미가 있음 “한 가지만 하고 그것만 잘 해라” 스크린샷 2020-04-24 오전 9 30 5…","html":"<h3 id=\"atomic-design\" style=\"position:relative;\"><a href=\"#atomic-design\" aria-label=\"atomic design permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>atomic design</h3>\n<ul>\n<li>\n<p><strong>Atom(원자)</strong></p>\n<ul>\n<li>물질의 기본 빌딩 블록</li>\n<li>웹 인터페이스에 적용</li>\n<li>폼의 텍스트 레이블, 인풋 필드, 버튼과 같은 HTML 태그</li>\n<li>컬러 팔레트, 폰트, 애니메이션과 같은 인터페이스</li>\n<li>의미가 없음</li>\n</ul>\n<p><img src=\"https://user-images.githubusercontent.com/36187948/80162471-69bed680-860e-11ea-9bd9-229d703e20ca.png\" alt=\"스크린샷 2020-04-24 오전 9 30 40\"></p>\n</li>\n<li>\n<p><strong>Molecules(분자)</strong></p>\n<ul>\n<li>원자그룹</li>\n<li>폼의 텍스트 레이블, 인풋필드, 버튼의 조합 폼(form)으로 구성되어 결합하면 실제로 무엇인가 할 수 있음</li>\n<li>의미가 있음</li>\n<li>“한 가지만 하고 그것만 잘 해라”</li>\n</ul>\n<p><img src=\"https://user-images.githubusercontent.com/36187948/80162563-a4c10a00-860e-11ea-87ca-9778d76d35e3.png\" alt=\"스크린샷 2020-04-24 오전 9 30 51\"></p>\n</li>\n<li>\n<p><strong>Organisms(유기체)</strong></p>\n<ul>\n<li>작업할 수 있는 빌딩 블록을 제공</li>\n<li>분자들을 결합하여 유기체를 형성할 수 있음</li>\n<li>최종 인터페이스가 어떻게 보이는지 시작하는 단계</li>\n<li>로고, 메인 네비게이션, 검색, 소셜 미디어 채널 리스트</li>\n<li>컴포넌트가 독립적이고 기동성이 있고 재사용이 가능함</li>\n</ul>\n<p><img src=\"https://user-images.githubusercontent.com/36187948/80162466-67f51300-860e-11ea-939d-ef3253690dce.png\" alt=\"스크린샷 2020-04-24 오전 9 31 00\"></p>\n</li>\n<li>\n<p><strong>Templates</strong></p>\n<ul>\n<li>최종 결과물에 더 작합한 언어</li>\n<li>레이아웃이 실제로 구동하는지 볼 수 있음</li>\n<li>구체적임</li>\n</ul>\n<p><img src=\"https://user-images.githubusercontent.com/36187948/80162488-74796b80-860e-11ea-8446-a82b27b48867.png\" alt=\"스크린샷 2020-04-24 오전 9 31 25\"></p>\n</li>\n</ul>\n<blockquote>\n<p>참조: <a href=\"http://atomicdesign.bradfrost.com/chapter-2/\">Atomic Design Methodology</a> <a href=\"https://brunch.co.kr/@ultra0034/63\">Atomic Design</a></p>\n</blockquote>","frontmatter":{"title":"Design System","date":"November 25, 2019"}}},"pageContext":{"slug":"/Today I Learned/Design_System/","previous":{"fields":{"slug":"/Today I Learned/클래스와_인터페이스/"},"frontmatter":{"title":"클래스와 인터페이스","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Angular/ElementRef/"},"frontmatter":{"title":"ElementRef","category":"Angular","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}